<template>
	<view class="addressChange">
		<view class="form">
			<u-form :model="form" ref="uForm">
				<u-form-item label-width="0" prop="receiver_name"><u-input v-model="form.receiver_name" placeholder="请输入收货人姓名" /></u-form-item>
				<u-form-item label-width="0" prop="receiver_phone"><u-input v-model="form.receiver_phone" placeholder="请输入手机号码" /></u-form-item>
				<u-form-item label-width="0" prop="area"><u-input type="select" v-model="form.area" placeholder="请选择所在区域" @click="pickerShowEvent" /></u-form-item>
				<u-form-item label-width="0" prop="detail"><u-input v-model="form.detail" placeholder="请输入详细地址" /></u-form-item>
			</u-form>
		</view>
		
		<view class="agreement flex_space_b mTop2">
			<!-- <u-checkbox v-model="form.default" active-color="#fe0000">设为默认地址</u-checkbox> -->
			<view class="label">设为默认地址</view>
			<u-switch v-model="form.is_default" size="40" @change="switchChange" :active-value="1" :inactive-value="0" active-color="#fe0000"></u-switch>
		</view>
		
		<view class="delete mTop2 redText" v-if="deleteChange" @tap="deleteEvent">删除收货地址</view>
		
		<view class="NewAddress">
			<button class="btn" type="default" @tap="newAddress">确认</button>
		</view>
		
		<u-picker mode="region" ref="uPicker" :default-region="region" v-model="pickerShow" @confirm="selectArea" />
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				form: {
					receiver_name: '',
					receiver_phone: '',
					province: '',
					city: '',
					unit: '',
					area: '',
					detail: '',
					is_default: 1
				},
				rules: {
					receiver_name: [
						{
							required: true,
							message: '请输入姓名',
							trigger: 'blur',
						}
					],
					receiver_phone: [
						{
							required: true,
							message: '请输入手机号',
							trigger: 'blur',
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: 'blur',
						}
					],
					area: [
						{
							required: true,
							message: '请选择区域',
							trigger: 'blur',
						}
					],
					detail: [
						{
							required: true,
							message: '请输入详细地址',
							trigger: 'blur',
						}
					]
				},
				pickerShow: false,
				deleteChange: false,
				region:[]
			}
		},
		methods: {
			selectArea: function (e) {
				this.form.area = e.province.label + ' ' + e.city.label + ' ' + e.area.label;
				this.form.province = e.province.label;
				this.form.city = e.city.label;
				this.form.unit = e.area.label;
				this.region = [e.province.label,e.city.label,e.area.label]
			},
			newAddress: function () {
				let that = this;
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if(that.form.id){
							// 编辑
							util.requestPost(
							  'api.php/user/editShippingAddress',
							  that.form,
							  function(res){
								uni.navigateBack();
							  },
							  true
							);
						}else{
							// 新增
							util.requestPost(
							  'api.php/user/insertShippingAddress',
							  that.form,
							  function(res){
								uni.navigateBack();
							  },
							  true
							);
						}
					}
				});
			},
			pickerShowEvent: function () {
				this.pickerShow = true
			},
			// 删除收货地址
			deleteEvent () {
				let that = this;
				uni.showModal({
				  content: '确认要删除该地址吗？',
				  success (res) {
					if (res.confirm) {
					  util.requestPost(
						'api.php/user/delShippingAddress',
						{id:that.form.id},
						function(res){
						  wx.navigateBack();
						},
						true
					  );
					}
				  }
				})
			},
			switchChange (item) {
				this.form.is_default = item;
			}
		},
		
		onLoad (options) {
			if (options.address_detail) {
				this.form = JSON.parse(options.address_detail);
				this.form.is_default = Boolean(Number(this.form.is_default))
				this.region = [this.form.province,this.form.city,this.form.unit];
				this.deleteChange = true
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style scoped>
.addressChange{
	background-color: #f5f5f5;
	min-height: 100%;
	height: auto;
	overflow: hidden;
}
.form {
	padding: 0 32rpx;
	background-color: #FFFFFF;
}
.agreement {
	background-color: #FFFFFF;
	padding: 20rpx 32rpx;
}
.delete {
	background-color: #FFFFFF;
	padding: 20rpx 32rpx;
}
.NewAddress {
	position: fixed;
	bottom: 0;
	left: 0;
	width:750rpx;
	height:102rpx;
	padding: 0 32rpx;
	background:rgba(255,255,255,1);
	box-shadow:0px 3px 14px 0px rgba(0, 0, 0, 0.09);
	display: flex;
	align-items: center;
}
.NewAddress .btn {
	width: 100%;
	height:80rpx;
	font-size: 32rpx;
	background: var(--btnBgColor);
	box-shadow:0px 3px 4px 0px rgba(0, 0, 0, 0.12);
	border-radius:40rpx;
	line-height: 80rpx;
	color: #FFFFFF;
}
</style>
